<template>
	<view class="ac-tabbar" :class="_isFixed ? 'fixed' : ''" :style="_style">
		<slot name="default"></slot>
	</view>
</template>

<script lang="ts" setup>
/**
 * tabbar
 * @description 自定义tabbar
 * @property {Number} duration 页面切换的动画周期
 * @property {String} timingFunction 页面切换的动画函数
 * @property {String} top 距离顶部的距离
 * @property {Boolean} isSeize = [true|false] tabs以及xbar的高度是否有占位
 * @property {Boolean} type = [true|false] considerXBar
 * @property {String} xBarbgType = [nav|primary|success|warning|error|light|dark|inverse|custom|link|none|page|hover|mask|mask-dark|border|border-light|border-dark|gradient] xbar的背景主题
 * @property {String} xBarStyle xbar的样式
 * @event {Function} tabClicked 点击事件
 */

import { ref, computed, watch, provide, Ref } from 'vue';
import { pub_props, computedColor } from '@/uni_modules/ac-ui/utils/minxs/props';

const ac = uni.$ac;

const props = defineProps({
	modelValue: [Number, String],
	color: {
		type: String,
		default: 'white',
	},
	fixed: {
		type: Boolean,
		default: true,
	},
	border: {
		type: Boolean,
		default: true,
	},
	zIndex: {
		type: Number,
		default: 1,
	},
	count: {
		type: Number,
		default: 5,
	},
	placeholder: {
		type: Boolean,
		default: true,
	},
	safeAreaInsetBottom: {
		type: Boolean,
		default: true,
	},
	_class: {
		type: [String, Array],
	},
	_style: {
		type: String,
	},
});

const _isFixed = computed(() => props.fixed);
const emits = defineEmits(['update:modelValue', 'click']);

//外部调用的方法。
const tmTabbarId = 'tmTabbarId';

defineExpose({ tmTabbarId, pushKey, delKey });

const _cachlist: Ref<Array<string | number>> = ref([]);

// provide('tmTabbarWidth', computed(() => Math.ceil(750 / _cachlist.value.length)))
provide(
	'tmTabbarWidth',
	computed(() => Math.ceil(750 / props.count))
);

function pushKey(uid: number) {
	_cachlist.value = [...new Set([..._cachlist.value, uid])];
}

function delKey(uid: number) {
	_cachlist.value = _cachlist.value.filter((el) => el != uid);
}

const _style = computed(() => {
	let style = {};
	if (props.color) {
		style['background-color'] = computedColor(props.color);
	}
	return style;
});
</script>

<style scoped>
.ac-tabbar {
	height: 50px;
	width: 750rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	/* 屏幕适配 env()和constant()需要同时存在，而且顺序不能换。 */
	/*兼容 IOS<11.2*/
	padding-bottom: constant(safe-area-inset-bottom);
	/*兼容 IOS>11.2*/
	padding-bottom: env(safe-area-inset-bottom);
	/* 计算高度的时候把padding包含进去 */
	box-sizing: content-box;
}

.fixed {
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 10;
}
</style>
